<template>
	<view class="pannel fs-24" v-if="info" @tap="toDetil(info.userFriendCircle.id)">
		<view style="padding:0 30rpx;justify-content: space-between;align-items: center;" class="flex">
			<view style="padding-right: 30rpx;">
				<view class="flex">
					<view class="avaterimage-box">
						<image :src="info.userAvatarUrl"></image>
					</view>
					<view class="ml-30" style="line-height: 50rpx;">
						<view class="header color-333333 fs-30 bold">
							<text>{{ info.userNickName }}</text>
						</view>
						<view v-if="info.commentId" class="color-333333 fs-30 gray" style="width: 280rpx;">
							<text class="text-overflow">{{ info.friendCircleComment.content }}</text>
						</view>
						<view v-if="!info.commentId" class="header color-333333 fs-30 gray">
							<text>喜欢了你的动态</text>
						</view>
						<view class="fs-26 gray">
							<text> {{ info.userInfo.time }} </text>
						</view>
						<view v-if="info.commentId" class="color-333333 fs-30 gray">
							<text>回复</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="info.userFriendCircle" class="image-box">
				<view v-if='info.userFriendCircle.videoImg' style="width: 224rpx;height: 224rpx;">
					<image v-if='info.userFriendCircle.videoImg' mode="aspectFill"
						:src="info.userFriendCircle.videoImg"></image>
				</view>
				<image v-if='info.userFriendCircle.image' mode="aspectFill" :src="info.userFriendCircle.image"></image>
				<view v-else style="overflow: hidden; 
            display: -webkit-box; 
            -webkit-box-orient: vertical; 
            -webkit-line-clamp: 3; 
            text-overflow: ellipsis;">{{info.userFriendCircle.text}}</view>

			</view>
			<view class="nullimage-box" v-else>朋友圈已删除</view>
		</view>


		<toast ref="deleteRef"></toast>
	</view>
</template>

<script>
	import api from './api/friendCircle'
	export default {
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			isDetail: {
				type: Boolean,
				default: false
			},
			tabindex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {};
		},
		methods: {
			toDetil(id) {
				if (!this.isDetail) {
					this.toPage('/pages/friend/detail?id=' + id);
				}

			},
		},
	};
</script>

<style lang="scss">
	.nullimage-box {
		width: 160rpx;
		height: 160rpx;
		line-height: 160rpx;
		border-radius: 15rpx;
		
	}
	.avaterimage-box {
		width: 120rpx;
		height: 120rpx;
		border-radius: 120rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.pannel {
		padding-bottom: 30rpx;
		padding-right: 0rpx;
		padding-left: 0;
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}

		.image-box {
			width: 160rpx;
			height: 160rpx;
			border-radius: 15rpx;
			overflow: hidden;
		}
	}

	.text-overflow {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>